<template>
   <div>
        <div class="flex items-center justify-center">
            <el-button-group >
                <el-button :type="activeTab=='amount'?'primary':null" class="rounded-full"  @click="activeTab = 'amount'">题量分析</el-button>
                <el-button :type="activeTab=='score'?'primary':null" class="rounded-full" @click="activeTab = 'score'">分数分布</el-button>
            </el-button-group>
        </div>
   <div ref="chart1" class="h-[300px] w-full"></div>
   </div>
</template>

<script setup>
import { ref,onMounted,reactive,onBeforeUnmount,watch,toRefs} from 'vue'
import * as echarts from 'echarts'


const  props = defineProps({
    chartData: {type: Array,default: () => []},
})
const {chartData} = toRefs(props)
const emit = defineEmits(['update:activeTab'])
onMounted(()=>{
  chartInstance1 = echarts.init(chart1.value)
  chartInstance1.setOption(chart1Option)
  window.addEventListener('resize',()=>{chartInstance1.resize()})
})

const  activeTab = ref('amount')

// 1 题量分布 柱状图
const chart1 = ref(null)
let chartInstance1 =null
const chart1Option = reactive({
     tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: { 
        type: 'value',
        axisLine: {
        show: true
      },
      axisTick: {
        show: true
      },
    //   axisLabel: {
    //     formatter: `{value} 道`
    //   }
     },
    yAxis: { 
      type: 'category', 
      data: chartData.value.map(item => item.name),
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
    },
    series: [
        {
        type: 'bar',
        data: chartData.value.map(item => item.num),
        barWidth: '60%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#60A5FA' },
            { offset: 1, color: '#93C5FD' }
          ]),
          barBorderRadius: 100
        },
        // label: {
        //   show: true,
        //   position: 'right',
        //   formatter: `{c} 道`
        // }
      }
    ]
  })


// 2 分数分布 饼图
// let chartInstance2 =null
const chartOption2 = reactive({
     legend: {
    orient: 'horizontal',
    x: 'center',

    data: chartData.value.map(item => item.name),
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      data:chartData.value.map(item => ({ name: item.name, value: item.score }))
    }
  ]
  })

  //初始化图标1
const initChart1 = () => { 
    if(!chart1.value) return
    // 销毁旧实例
    if (chartInstance1) {
        chartInstance1.dispose();
     }
     if(activeTab.value === 'amount'){
     //创建新实例
     chartInstance1 = echarts.init(chart1.value);
     chartInstance1.setOption(chart1Option);
     }else{
      chartInstance1 = echarts.init(chart1.value);
      chartInstance1.setOption(chartOption2);
     }
}
watch(activeTab, () => {
  initChart1();
})

onMounted(()=>{   
     initChart1();
    window.addEventListener('resize', handleResize);
})
//影响窗口变化 
const handleResize = () => {
  chartInstance1?.resize();
};

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
  chartInstance1?.dispose();
});
</script >
<style lang="less" scoped>
</style>